
<template>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100">
<!--    <div class="w-full h-full">-->


  <div class="main w-full h-full">
    <div class="header" style="letter-spacing: 2px;">
      <div class="header-left fl representation">
          <div class="col" :span="4">
            <div class="cicle"></div>
            <span class="text">{{$t('ems.powerOn')}}</span>
          </div>
          <div class="col" :span="4">
            <div class="cicle2"></div>
            <span class="text">{{$t('ems.production')}}</span>
          </div>
          <div class="col" :span="4">
            <div class="cicle3"></div>
            <span class="text">{{$t('ems.shutDown')}}</span>
          </div>
          <div class="col" :span="4">
            <div class="cicle4"></div>
            <span class="text">{{$t('ems.breakdown')}}</span>
          </div>
          <div class="col" :span="4">
            <div class="cicle5"></div>
            <span class="text">{{$t('ems.operation')}}</span>
          </div>
      </div>
      <div class="header-center fl">
        <div class="header-title">
          {{$t('common.mfRealTimeLine')}}
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-right fl time-Box">
        <div class="time">{{currentTime}}</div>
        <div class="date">
          <span style="display: block">{{currentyear}}</span>
          <span style="display: block" class="weekday">{{currentWeek}}</span>
        </div>

      </div>
      <div class="header-bottom fl"></div>
    </div>

    <div class="center w-full h-full">
      <div class="center-left fl" style="width: 28%;height: calc(100% - 120px);">
        <leftBox :detailsLVT="detailsLVT" :detailsJC="detailsJC" :detailsHL="detailsHL"/>
      </div>
      <div class="center-center fl" style="width: 40%;height: calc(100% - 120px);">
<!--        <center />-->
        <total-equipment :middleStatusData="middleStatusData"></total-equipment>
      </div>
      <div class="center-right fr" style="width: 32%;height: calc(100% - 120px);">
        <rightBox  :detailsTH="detailsTH" :detailsJJG="detailsJJG" :detailsLMHH="detailsLMHH"/>
      </div>


    </div>
  </div>
    <!-- 加载动画 -->
    <div v-if="store.$state.loading" id="load">
      <div class="load_img w-full h-full">
        <img class="jzxz1" src="./images/jzxz1.png">
        <img class="jzxz2" src="./images/jzxz2.png">
      </div>
    </div>
<!--    </div>-->
  </ScaleBox>
</template>

<script setup>
import '@/style/tailwind.css'
import ScaleBox from 'vue3-scale-box'
import '@/assets/font/iconfont.css'
import { ref, onMounted,computed } from 'vue';
import "./index.scss"; // 导入样式文件;
import moment from 'moment';
// import center from './components/center.vue'
import leftBox from './components/leftBox.vue'
import rightBox from './components/rightBox.vue'
import totalEquipment from '@/components/ems/equipmentProdLine/totalEquipment'
import { getRunInfo } from './ProductionLineApi'
import { useAppStoreHook } from '@/store/useAppStoreHook';
import useI18n from '@/hooks/language'
const { t } = useI18n()

const store = useAppStoreHook();
const currentTime = ref('');
const currentyear = ref('');
const currentWeek = ref('');
const details = ref();
const runTimes = ref();//运行时间
const totalCounts = ref(); //总数
const totalPercents = ref(); //总数
const total = ref(); // 设备总数


const detailsJJG= ref(); // 精加工

const detailsJC= ref(); // 挤出
const detailsHL= ref(); // 混料
const detailsLVT = ref(); // LVT
const detailsTH = ref(); // 贴合
const detailsLMHH = ref(); // 淋膜回火
const middleStatusData = ref({});

const getTime = () => {
  const myDate = new Date();
  const myYear = myDate.getFullYear();
  const myMonth = myDate.getMonth() + 1;
  const myToday = myDate.getDate();
  const myDay = myDate.getDay();
  const myHour = myDate.getHours();
  const myMinute = myDate.getMinutes();
  const mySecond = myDate.getSeconds();
  const week = [t('common.Sunday'), t('common.Monday'), t('common.Tuesday'), t('common.Wednesday'),
    t('common.Thursday'), t('common.Friday'), t('common.Saturday')];


  const fillZero = (str) => (str < 10 ? `0${str}` : str);
  currentyear.value =`${myYear}-${fillZero(myMonth)}-${fillZero(myToday)}`
  currentTime.value = `${fillZero(myHour)}:${fillZero(myMinute)}:${fillZero(mySecond)}`;
  currentWeek.value = week[myDay]
};

onMounted(() => {
  getTime();
  setInterval(getTime, 1000);
  getData()
  setInterval(getData, 6000);
});

const getData = async () => {
  const res = await getRunInfo({
    beginTime: moment().format('YYYY-MM-DD 00:00:00'),
    endTime: moment().format('YYYY-MM-DD 23:59:59')
  })
  if (res.code === 200) {
    details.value = res.result.details;
    totalCounts.value = res.result.totalCounts
    total.value = res.result.total
    totalPercents.value = res.result.totalPercents
    middleStatusData.value.total = res.result.total
    res.result.totalCounts.map(item => {
      if (item.status == '开机') {
        middleStatusData.value.PowerOnCount =item.count
      }
      if (item.status == '生产') {
        middleStatusData.value.InProductionCount =item.count
      }
      if (item.status == '停机') {
        middleStatusData.value.ShutDownCount =item.count
      }
      if (item.status == '故障') {
        middleStatusData.value.BreakDownCount =item.count
      }
      if (item.status == '运行') {
        middleStatusData.value.RunningCount =item.count
      }
    })
    res.result.totalPercents.map(item => {
      if (item.title == 'MixPowerPercent') {
        middleStatusData.value.HL =item.percent
      }
      if (item.title == 'JCPowerPercent') {
        middleStatusData.value.WPC =item.percent
      }
      if (item.title == 'LVTPowerPercent') {
        middleStatusData.value.LVT =item.percent
      }
      if (item.title == 'LMHHPowerPercent') {
        middleStatusData.value.LMHH =item.percent
      }
      if (item.title == 'THPowerPercent') {
        middleStatusData.value.TH =item.percent
      }
      if (item.title == 'JKJPowerPercent') {
        middleStatusData.value.JKJ =item.percent
      }
      if (item.title == 'PEPowerPercent') {
        middleStatusData.value.PE =item.percent
      }
      if (item.title == 'DRPowerPercent') {
        middleStatusData.value.DR =item.percent
      }

    })

    // let runTime = res.result.runTimes
    detailsJC.value = details.value?.filter(item => ['JC'].includes(item.processCode)) // 过滤符合条件的项
      .map(item => {
        const match = item.lineCode.match(/Line(\d+)/);
        const lineNumber = match ? match[1].padStart(2, '0') : '00'; // 确保小于10时补零
        return {
          ...item,
          name: `#${item.processCode}${lineNumber}`
        };
      });
      detailsHL.value = details.value?.filter(item => ['FS', 'YH'].includes(item.processCode)) // 过滤符合条件的项
      .map(item => {
        const match = item.lineCode.match(/Line(\d+)/);
        const lineNumber = match ? match[1].padStart(2, '0') : '00'; // 确保小于10时补零
        return {
          ...item,
          name: `#${item.processCode}${lineNumber}`
        };
      });
      detailsLVT.value = details.value?.filter(item => ['LVT'].includes(item.processCode)) // 过滤符合条件的项
      .map(item => {
        const match = item.lineCode.match(/Line(\d+)/);
        const lineNumber = match ? match[1].padStart(2, '0') : '00'; // 确保小于10时补零
        return {
          ...item,
          name: `#${item.processCode}${lineNumber}`
        };
      });

    detailsTH.value = details.value?.filter(item => ['TH'].includes(item.processCode)) // 过滤符合条件的项
      .map(item => {
        const match = item.lineCode.match(/Line(\d+)/);
        const lineNumber = match ? match[1].padStart(2, '0') : '00'; // 确保小于10时补零
        return {
          ...item,
          name: `#${item.processCode}${lineNumber}`
        };
      });
    detailsLMHH.value = details.value?.filter(item => ['LMHH'].includes(item.processCode)) // 过滤符合条件的项
      .map(item => {
        const match = item.lineCode.match(/Line(\d+)/);
        const lineNumber = match ? match[1].padStart(2, '0') : '00'; // 确保小于10时补零
        return {
          ...item,
          name: `#${item.processCode}${lineNumber}`
        };
      });
    detailsJJG.value = details.value?.filter(item => ['DR','PE', 'JKJ'].includes(item.processCode)) // 过滤符合条件的项
      .map(item => {
        const match = item.lineCode.match(/Line(\d+)/);
        const lineNumber = match ? match[1].padStart(2, '0') : '00'; // 确保小于10时补零
        return {
          ...item,
          name: `#${item.processCode}${lineNumber}`
        };
      }).sort((a, b) => {
        const order = ['JKJ', 'PE', 'DR'];
        return order.indexOf(a.processCode) - order.indexOf(b.processCode); // 根据顺序排序
      });

  }
};
</script>

<style scoped lang="scss">

:deep(.boxDialog){
  position: relative;
  background: url('./images/k_1.png') no-repeat;
  background-size: 100% 100%; /* 确保背景图像始终填充 */
  padding: 30px 30px;
  height: auto;
  .el-dialog__header{
    display: none;
  }
}

</style>
